<template>
  <el-dialog v-model="dialogVisibleInner" title="详情" @close="handlerClose">
    <div class="add-contract">
      <el-card class="card" shadow="hover">
        <template #header>
          <h3 class="title">个人信息详情</h3>
        </template>

        <!-- 新增表单 -->
        <el-form :model="personalInfoForm" :rules="rules" ref="personalInfoFormRef" label-width="120px" style="max-width: 800px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="personalInfoForm.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否为顾客" prop="isCustomer">
                <el-select v-model="personalInfoForm.isCustomer" placeholder="请选择" disabled>
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="投资类型" prop="investmentType">
                <el-input v-model="personalInfoForm.investmentType" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="personalInfoForm.gender" placeholder="请选择" disabled>
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="居住地址" prop="residenceAddress">
                <el-input v-model="personalInfoForm.residenceAddress" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话号码" prop="phoneNumber">
                <el-input v-model="personalInfoForm.phoneNumber" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="关联客户" prop="relatedCustomer">
                <el-input v-model="personalInfoForm.relatedCustomer" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投资金额" prop="investmentAmount">
                <el-input v-model.number="personalInfoForm.investmentAmount" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCardNumber">
                <el-input v-model="personalInfoForm.idCardNumber" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="照片路径" prop="photoPath">
                <el-input v-model="personalInfoForm.photoPath" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 投资者信息 -->
        <el-divider content-position="left">投资者信息</el-divider>

        <el-table :data="personalInfoForm.investorsvoZbs" border style="width: 100%">
          <!-- 序号列 -->
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <!-- 新增充电站信息字段 -->
          <el-table-column prop="stationName" label="充电站名称" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.stationName" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="stationAttribute" label="充电站属性" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.stationAttribute" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="stationType" label="充电站类型" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.stationType" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="chargingPileCount" label="充电桩数量" width="150">
            <template #default="scope">
              <el-input-number v-model="scope.row.chargingPileCount" controls-position="right" :min="0" disabled></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="detailedAddress" label="详细地址">
            <template #default="scope">
              <el-input v-model="scope.row.detailedAddress" disabled></el-input>
            </template>
          </el-table-column>
        </el-table>

        <!-- 项目信息 -->
        <el-divider content-position="left">项目信息</el-divider>

        <el-table :data="personalInfoForm.projects" border style="width: 100%">
          <!-- 序号列 -->
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.projectName" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="projectDescription" label="项目描述">
            <template #default="scope">
              <el-input v-model="scope.row.remarks" disabled></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted, toRaw, defineProps, watch, defineEmits } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

const props = defineProps({
  dialog4list: Boolean, // 是否可见
  formId: Number
});
const emit = defineEmits();
const handlerClose = () => {
  dialogVisibleInner.value = false;
  // 告诉父组件，当前子组件关闭了
  emit('close', false);
}
watch(() => props.dialog4list, (newVal) => {
  dialogVisibleInner.value = true
  getlist()
});

const getlist = () => {
  axios.get(`/Investors/getById?invId=${props.formId}`)
      .then(resp => {
        personalInfoForm.value = resp.data
      })
}

const dialogVisibleInner = ref(false)
// 初始化 personalInfoForm 并设置默认值
const personalInfoForm = ref({
  investorsvoZbs: [], // 确保初始化为空数组
  projects: [] // 确保初始化为空数组
});

// 动态添加投资者行
const addInvestorRow = () => {
  personalInfoForm.value.investorsvoZbs.push({
    field1: '',
    field2: ''
    // 根据实际需要初始化其他字段
  });
};

// 动态添加项目行
const addProjectRow = () => {
  personalInfoForm.value.projects.push({
    projectName: '',
    projectDescription: ''
    // 根据实际需要初始化其他字段
  });
};

const router = useRoute();
onMounted(() => {

});

const personalInfoFormRef = ref(null);

// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 使用 toRaw 将响应式对象转换为普通对象
      const formData = toRaw(personalInfoForm.value);

      axios.post('/Investors/addInvestors', formData)
          .then(resp => {
            console.log('Personal Info added:', resp.data);
            // 成功提示或跳转等操作
          })
          .catch(error => {
            console.error('Error adding personal info:', error);
          });
    } else {
      console.log('error submit!', fields);
    }
  });
};

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.add-contract {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  margin-top: 60px;
}

.card {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.title {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}

/* 移除禁用状态下的图标 */
.el-input.is-disabled .el-input__inner,
.el-select.is-disabled .el-input__inner,
.el-input-number.is-disabled .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  color: #606266; /* 设置为与非禁用时相同的颜色 */
  cursor: not-allowed;
}

/* 如果有额外的图标（如清除按钮），也可以一并移除 */
.el-input.is-disabled .el-input__suffix {
  display: none;
}

/* 针对 el-input-number 的特殊处理 */
.el-input-number.is-disabled .el-input-number__decrease,
.el-input-number.is-disabled .el-input-number__increase {
  display: none;
}
</style>